.home-container {
    width: 100%;
    min-height: 100%;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: @mainColor;

    .agent-tips {
        margin-top: @topMargin;

        width: @cardWidth;
    }

    .network-info {
        margin-top: @topMargin;

        width: @cardWidth;

        .sim-card-info {
            display: flex;
            align-items: center;

            height: @simCardHeight;

            background-color: @cardColor;

            border-radius: @cardRadius;
            border: @cardBorderSize solid @cardBorderCorlor;
            box-sizing: border-box;

            .sim-status-icon {
                width: 60px;

                img {
                    width: 34px;
                    object-fit: contain;
                }
            }

            .sim-status-text {
                span {
                    font-size: 14px;
                    font-weight: bold;
                }

                &-success {
                    color: @simSuccess;
                }

                &-no-server {
                    color: @simNoServer;
                }

                &-disconnected {
                    color: @simDisconnected;
                }

                &-modem-init {
                    color: @simModemInit;
                }

                &-sim-init {
                    color: @simInit;
                }

                &-no-sim {
                    color: @simNo;
                }

                &-pp-lock {
                    color: @simPPLocked;
                }

                &-sim-lock {
                    color: @simLocked;
                }

                &-ippt {
                    color: @simIPPT;
                }
            }
        }

        .speed-info {
            height: @simCardHeight;

            background-color: @cardColor;

            border-radius: @cardRadius;

            background-color: @speedColor;

            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 20px;

            .speedLeft,
            .speedRight {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 15px;
                    padding-right: 5px;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    user-select: none;
                }
                .max {
                    padding-left: 15px;
                }
            }

            @media (max-width: 690px) {
                .verticalLine {
                    display: none;
                }
            }
        }

        // 显示网速时，调整盒子圆角
        .sim-card-radius {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .speed-card-radius {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }

    .device-wifi-info {
        justify-content: space-between;

        height: @deviceWifiHeight;

        width: @cardWidth;

        border-radius: @cardRadius;

        margin-top: @cardMargin;

        .device-info {
            width: @deviceNetWidth;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .signal-status {
                position: relative;
            }

            .signal-status,
            .device-info-conetnt {
                height: @cardHeightLevel;
                background-color: @cardColor;

                border-radius: @cardRadius;
                border: @cardBorderSize solid @cardBorderCorlor;
                box-sizing: border-box;

                .layout-left-card {
                    width: 40%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 90px;
                        object-fit: cover;
                    }

                    .set-roam-icon {
                        position: relative;

                        .roam-icon {
                            font-size: 1.5em;
                            color: #4067d8;
                            position: absolute;
                            left: 10px;
                            top: 10px;
                        }
                    }
                }
                .layout-center-card {
                    width: 45%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    .layout-center-card-top {
                        align-items: flex-end !important;
                        font-weight: bold;
                    }

                    .layout-center-card-top,
                    .layout-center-card-bottom {
                        display: flex;
                        height: 50%;
                        align-items: flex-start;
                        justify-content: center;
                    }
                }
                .layout-right-card {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 15%;
                    img {
                        width: 18px;
                        display: block;
                    }
                }
            }
        }

        .wifi-info {
            width: @wifiWidth;
            height: 100%;
            background-color: @cardColor;

            border-radius: @cardRadius;
            border: @cardBorderSize solid @cardBorderCorlor;
            box-sizing: border-box;

            min-height: @rateHeight;

            &-flex {
                display: flex;
                flex: 1;

                .vertical-divider {
                    width: 1px;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    /deep/.el-divider {
                        margin: 0;
                        height: 80% !important;
                    }
                }

                .divider {
                    display: none;
                }

                .wifi-info-card {
                    flex: 1;
                    padding: 0 20px;
                    box-sizing: border-box;
                    display: flex;

                    .wifi-main-container {
                        flex: 1;
                        .wifi-type {
                            display: flex;
                            align-items: center;
                            height: 50px;
                            span {
                                padding-left: 6px;
                                box-sizing: border-box;
                                font-weight: bold;
                                color: @grayText;
                            }
                        }

                        .show-wifi-qrcode {
                            justify-content: space-between;
                            height: auto !important;
                        }

                        .wifi-name {
                            display: flex;
                            align-items: center;
                            .wifi-name-text {
                                box-sizing: border-box;
                            }
                        }

                        .wifi-pwd {
                            display: flex;
                            align-items: center;

                            .wifi-pwd-text {
                                flex: 1;
                            }

                            .view-pwd {
                                width: 50px;
                                text-align: right;
                                img {
                                    height: 25px;
                                    object-fit: cover;
                                    cursor: pointer;
                                }
                            }
                        }

                        .wifi-name,
                        .wifi-pwd {
                            height: 45px;
                            margin: 5px 0;

                            .wifi-name-text,
                            .wifi-pwd-text {
                                color: @grayText;
                                overflow: hidden;
                                word-break: break-all;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                white-space: pre-wrap;
                            }
                        }

                        .wifi-btn {
                            /deep/.el-button {
                                background-color: @WiFibtnColor !important;
                                border-color: @WiFibtnBorderColor !important;
                                color: @WiFibtnFontColor !important;
                            }
                        }
                    }
                }

                @media (max-width: 980px) {
                    .wifi-info-card {
                        padding: 5px;
                    }
                }

                @media (max-width: 1273px) {
                    .wifi-info-card-qrcode {
                        padding: 20px;
                    }
                }
            }
        }

        @media (max-width: @wrapWidth) {
            .wifi-info {
                display: block;

                &-flex {
                    display: block;
                    .vertical-divider {
                        display: none;
                    }

                    .divider {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        /deep/.el-divider {
                            margin: 2px;
                        }
                    }
                }
            }
        }
    }

    .no-wifi-container {
        height: @deviceWifiHeight !important;

        .device-info {
            flex-direction: row !important;
            width: 100% !important;

            .signal-status,
            .device-info-conetnt {
                height: 100% !important;
                width: 48% !important;
            }
        }
    }

    .margin-no-network-info {
        margin-top: @topMargin !important;
    }

    .set-card-margin {
        margin-top: @cardMargin !important;
    }

    .triple-band-wifi {
        width: @cardWidth;
    }


    /* 5G/设备状态连接图示样式 */
    .network-status-container {
        width: @cardWidth;
        height: auto;
        margin-top: @cardMargin;
        margin-bottom: @cardMargin;
        justify-content: space-between;
        background-color: @cardColor;
        border-radius: @cardRadius;
        border: @cardBorderSize solid @cardBorderCorlor;
        box-sizing: border-box;
        padding: 65px 30px;    

        .green-line-up-box{
            .green-line-up{
                width: 210px;
                margin-bottom: 14px;
                img{
                    padding-left: 82px;
                    margin-right: 4px;
                }
            }
            .green-line{
                width: 210px;
                height: 0px;
                border-radius: 0px 0px 0px 0px;
                border: 2px dashed #00CE52;
            }
            .green-line-below{
                margin-top: 14px;
                height: 23px;
                width: 210px;
               
                img{
                    padding-left: 82px;
                    margin-right: 4px;
                }
            }
        }
       
        .network-left, .mobile-device {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            img {
                width: 90px;
                height: 90px;
                margin-bottom: 10px;
                object-fit: contain;
            }
            
            .network-text {
                font-size: 14px;
                font-weight: bold;
                color: #333;
                white-space: nowrap;
            }
        }
        
        .connect-line {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            
            .line-2-4g, .line-5g {
                display: flex;
                align-items: center;
                height: 30px;
                position: relative;
                
                &:before {
                    content: '';
                    position: absolute;
                    height: 2px;
                    background-color: #4cd964;
                    width: 100%;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
                
                .line-dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: #4cd964;
                    position: relative;
                    z-index: 1;
                    margin: 0 10px;
                }
                
                span {
                    font-size: 12px;
                    margin-left: 5px;
                    position: relative;
                    z-index: 1;
                    background-color: white;
                    padding: 0 5px;
                    color: #666;
                }
            }
            
            .line-5g {
                margin-top: 10px;
            }
        }
        
        @media (max-width: 768px) {
            flex-direction: column;
            height: auto;
            padding: 15px;
            
            .network-left, .mobile-device {
                width: 100%;
                margin-bottom: 15px;
            }
            
            .connect-line {
                width: 80%;
                margin: 15px 0;
                
                .line-2-4g, .line-5g {
                    width: 100%;
                }
            }
        }
    }

    

    .is-single-wiFi {
        .device-info,
        .wifi-info {
            width: 48%;

            .layout-center-card {
                align-items: flex-start !important;
            }
        }
    }

    .isp-info {
        display: flex;
        align-items: center;

        border-radius: @cardRadius;

        margin-top: @cardMargin;

        width: @cardWidth;

        .isp-icon {
            width: 18px;
            padding-right: 5px;
        }

        .isp-noServe {
            color: @ISPFontNoServe;
        }

        .isp-serve {
            color: @ISPFontServe;
        }

        .isp-noServe,
        .isp-serve {
            font-weight: bold;
            font-size: 14px;
        }
    }

    .isp-info-card {
        height: @simCardHeight;
        line-height: @simCardHeight;
        background-color: @ISPColor;
        border: @ISPBorderSize solid @ISPBorderCorlor;

        box-sizing: border-box;

        .isp-icon {
            padding-left: 15px;
        }
    }

    .rate-info {
        justify-content: space-between;

        height: @rateHeight;

        width: @cardWidth;

        border-radius: @cardRadius;

        margin: @cardMargin 0;

        .month-info,
        .session-info {
            width: 48%;
            height: 100%;
            padding: 15px 5%;
            box-sizing: border-box;

            background-color: @cardColor;

            border-radius: @cardRadius;
            border: @cardBorderSize solid @cardBorderCorlor;
            box-sizing: border-box;

            .info-title {
                min-height: 50px;
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 700;
                color: black;
            }

            .info-text {
                height: 25px;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #686868ff;
                font-weight: 400;
            }

            .used-info {
                height: 100px;
                display: flex;
                align-items: center;
                font-size: 18px;
                color: #000000ff;
                font-weight: bold;
            }

            .link-time {
                font-size: 16px;
                font-weight: 400;
                color: @secondsToTime;
            }

            .learn-info {
                font-size: 16px;
                color: @learnMore;
                font-weight: bold;
            }
        }

        .session-info {
            margin: @cardMargin 0;
        }
    }

    @media (max-width: 1273px) {
        .device-wifi-info {
            display: block;
            height: 100%;

            .device-info {
                width: 100%;
                display: flex;
                height: calc(@deviceWifiHeight / 2);

                flex-direction: row;

                .signal-status,
                .device-info-conetnt {
                    width: 48%;
                    height: 100%;
                }
            }

            .wifi-info {
                width: 100%;
                margin-top: @cardMargin;
            }
        }

        .no-wifi-container {
            .device-info {
                height: @deviceWifiHeight !important;
            }
        }
    }

    @media (max-width: 570px) {
        .device-wifi-info {
            display: block;
            height: 100%;

            .device-info {
                width: 100%;
                height: @deviceWifiHeight;

                flex-direction: column;

                .signal-status,
                .device-info-conetnt {
                    width: 100%;
                }

                .device-info-conetnt {
                    margin-top: @cardMargin;
                }
            }
        }

        .no-wifi-container {
            height: 100% !important;

            .device-info {
                height: 100% !important;
                flex-direction: column !important;

                .signal-status,
                .device-info-conetnt {
                    width: 100% !important;
                    height: @deviceWifiHeight !important;
                }
            }
        }

        .rate-info {
            display: block;
            height: 100%;

            .month-info,
            .session-info {
                width: 100%;
                height: @rateHeight;
            }
        }
    }

    // 信号测试按钮样式
    .signal-test {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: @blueColor;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 6px;
        opacity: 1;
        border: 1px dashed @blueColor;
        padding: 4px;
        cursor: pointer;
        text-align: center;
        position: absolute;
        bottom: 0px;
        width: 92%;
        left: 50%;
        transform: translateX(-50%);
    }
}

// 有服务背景
.serviceBackgorund {
    background-color: @simSuccessBg !important;
    border: none !important;
}

// 无卡背景
.noSimCardBackgorund {
    background-color: @simNoBg !important;
    border: none !important;
}

// 初始化背景
.initBackgorund {
    background-color: @simModemInitBg !important;
    border: none !important;
}

// 无服务背景
.noServiceBackgorund {
    background-color: @simNoServerBg !important;
    border: none !important;
}

// 有锁背景
.lockedBackgorund {
    background-color: @simLockedBg !important;
    border: none !important;
}

// 无拨号背景
.disconnectedBackgorund {
    background-color: @simDisconnectedBg !important;
    border: none !important;
}

.wifi-info-container {
    width: @cardWidth;
        height: auto;
        margin-top: @cardMargin;
        margin-bottom: @cardMargin;
        justify-content: space-between;
        background-color: @cardColor;
        border-radius: @cardRadius;
        border: @cardBorderSize solid @cardBorderCorlor;
        box-sizing: border-box;
        padding: 65px 30px;    
}

.wifi-card {
    flex: 1;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    position: relative;
}

.wifi-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    width: 1px;
    height: 80%;
    background: #e6ecf2;
}

.wifi-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
}

.wifi-icon {
    width: 48px;
    height: 48px;
    display: flex; 
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}
.wifi-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.wifi-type {
    font-size: 18px;
    color: #8a97a6;
    font-weight: 600;
    margin-right: auto;
}

.details-button {
    margin-left: auto;
}

.wifi-content {
    width: 100%;
}

.wifi-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: space-between; // 新增
}
.wifi-label {
    padding-left: 30px;
    width: 100px;
    color: #222;
    font-size: 16px;
    font-weight: 500;
}
.wifi-value {
    flex: 1;
    color: #8a97a6;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-right: 40px;
    justify-content: flex-end; // 新增，让内容靠右

}
.password-field {
    letter-spacing: 2px;
}
.password-toggle {
    margin-left: 8px;
    color: #8a97a6;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

@media (max-width: 980px) {
    .wifi-info-container {
        flex-direction: column;
        width: 100%;
        padding: 16px 4px;
    }
    .wifi-card {
        padding: 0 4px;
        margin-bottom: 16px;
    }
    .wifi-card:not(:last-child)::after {
        display: none;
    }
}

// 暗模式样式
.theme-dark {
    .home-container {
        background: @dark-bg-primary !important;
        
        .network-info {
            .sim-card-info {
                background-color: @dark-bg-secondary !important;
                border-color: @dark-border !important;
            }
            
            .speed-info {
                background-color: @dark-bg-secondary !important;
            }
        }
        
        .device-wifi-info {
            .device-info {
                .signal-status,
                .device-info-conetnt {
                    background-color: @dark-bg-secondary !important;
                    border-color: @dark-border !important;
                }
            }
            
            .wifi-info {
                background-color: @dark-bg-secondary !important;
                border-color: @dark-border !important;
                
                .wifi-info-card {
                    .wifi-main-container {
                        .wifi-type span {
                            color: @dark-text-secondary !important;
                        }
                        
                        .wifi-name-text,
                        .wifi-pwd-text {
                            color: @dark-text-secondary !important;
                        }
                    }
                }
            }
        }
        
        .network-status-container {
            background-color: @dark-bg-secondary !important;
            border-color: @dark-border !important;
            
            .network-left,
            .mobile-device {
                .network-text {
                    color: @dark-text-primary !important;
                }
            }
        }
        
        .wifi-info-container {
            background-color: @dark-bg-secondary !important;
            border-color: @dark-border !important;
        }
        
        .wifi-card {
            .wifi-type {
                color: @dark-text-secondary !important;
            }
            
            .wifi-label {
                color: @dark-text-primary !important;
            }
            
            .wifi-value {
                color: @dark-text-secondary !important;
            }
            
            .password-toggle {
                color: @dark-text-secondary !important;
            }
        }
        
        .wifi-card:not(:last-child)::after {
            background: @dark-border !important;
        }
        
        .isp-info-card {
            background-color: @dark-bg-secondary !important;
            border-color: @dark-border !important;
            
            .isp-noServe,
            .isp-serve {
                color: @dark-text-primary !important;
            }
        }
        
        .rate-info {
            .month-info,
            .session-info {
                background-color: @dark-bg-secondary !important;
                border-color: @dark-border !important;
                
                .info-title {
                    color: @dark-text-primary !important;
                }
                
                .info-text {
                    color: @dark-text-secondary !important;
                }
                
                .used-info {
                    color: @dark-text-primary !important;
                }
            }
        }
        
        .signal-test {
            background: rgba(44, 44, 44, 0.9) !important;
            color: @blueColor !important;
            border-color: @blueColor !important;
        }
    }
}
